<fieldset>
  <legend>{:lang('条件搜索')}</legend>
  <form
    action="{:sysuri()}"
    autocomplete="off"
    class="layui-form layui-form-pane form-search"
    method="get"
    onsubmit="return false"
    id="formSearch">
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品编号</label>
      <label class="layui-input-inline">
        <input class="layui-input" name="no" placeholder="请输入" value="{$get.no|default=''}" />
      </label>
    </div>
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品名称</label>
      <label class="layui-input-inline">
        <input class="layui-input" name="name" placeholder="请输入" value="{$get.name|default=''}" />
      </label>
    </div>

    <!--{notempty name='marks'}-->
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品标签</label>
      <label class="layui-input-inline">
        <select class="layui-select" lay-search name="marks">
          <option value="">-- 全部标签 --</option>
          {foreach $marks as $mark}{if input('marks','') eq $mark}
          <option selected value="{$mark}">{$mark}</option>
          {else}
          <option value="{$mark}">{$mark}</option>
          {/if}{/foreach}
        </select>
      </label>
    </div>
    <!--{/notempty}-->

    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品一级分类</label>
      <div class="layui-input-inline">
        <label class="layui-input-inline">
          <select class="layui-select" id="cat1" lay-filter="cat1" lay-search name="cat1">
            <option value="">请选择</option>
            {foreach $cates as $cate}
            <option value="{$cate.id}">{$cate.name|default=''}</option>
            {/foreach}
          </select>
        </label>
      </div>
    </div>
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品二级分类</label>
      <div class="layui-input-inline">
        <label class="layui-input-inline">
          <select class="layui-select" id="cat2" lay-filter="cat2" lay-search name="cat2" disabled>
            <option value="">请选择</option>
          </select>
        </label>
      </div>
    </div>
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">商品三级分类</label>
      <div class="layui-input-inline">
        <label class="layui-input-inline">
          <select class="layui-select" id="cat3" lay-filter="cat3" lay-search name="cate3" disabled>
            <option value="">请选择</option>
          </select>
        </label>
      </div>
    </div>

    <div class="layui-form-item layui-inline">
      <button class="layui-btn layui-btn-primary" id="test">
        <i class="layui-icon">&#xe615;</i>
        搜 索
      </button>
      <button
        type="button"
        data-form-export="{:url('index')}?type={$type|default=''}"
        class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-export"></i>
        {:lang('按条件导出')}
      </button>
    </div>
  </form>
</fieldset>

<script>
  const cates = <?php echo json_encode($cates); ?>;
  let selectCate1 = {};
  let selectCate2 = {};

  layui.use(function(){
    var form = layui.form;
    var layer = layui.layer;
    // select 事件
    form.on('select(cat1)', function(data){
      const value = data.value; // 获得被选中的值
      const $twoSelect = $('#cat2');
      const $threeSelect = $('#cat3');
      selectCate2 = {};

      // 清空二级和三级菜单的选项，并添加默认提示选项
      $twoSelect.html('<option value="">请选择</option>');
      $threeSelect.html('<option value="">请选择</option>');

      // 如果一级有选中值，则动态添加对应的二级选项
      if (value) {
        selectCate1 = cates.find((item)=> item.id == value);
        // 这里简化处理，直接遍历模拟数据中对应一级值的所有属性
        selectCate1.sub.forEach((item) => {
          $twoSelect.append(`<option value="${item.id}">${item.name}</option>`);
        })
        $twoSelect.prop('disabled', false);
      } else {
        selectCate1 = {}
        $twoSelect.prop('disabled', true);
        $threeSelect.prop('disabled', true);
      }

      // 重新渲染二级和三级菜单 (因为选项DOM发生了变化)
      form.render('select');
    });
    form.on('select(cat2)', function(data){
      const value = data.value; // 获得被选中的值
      const $threeSelect = $('#cat3');

      $threeSelect.html('<option value="">请选择</option>');
      if (value) {
        selectCate2 = selectCate1.sub.find((item)=> item.id == value);
        if (selectCate2.sub) {
          selectCate2.sub.forEach((item) => {
            $threeSelect.append(`<option value="${item.id}">${item.name}</option>`);
          })
          $threeSelect.prop('disabled', false);
        } else {
          $threeSelect.prop('disabled', true);
        }
      } else {
        $threeSelect.prop('disabled', true)
      }
      form.render('select');
    });
  });

  var id_arr = [
    'status_name',
    'id',
    'no',
    'cat',
    'name',
    'ename',
    'guige',
    'eguige',
    'int',
    'mint',
    'bint',
    'sint',
    'tint',
    'bgint',
    'bgicon',
    'bgcode',
    'bgname',
    'bgename',
    'pweight',
    'pmweight',
    'ptj',
    'pnum',
    'plong',
    'pkuan',
    'pheight',
    'cktype',
    'jktype',
    'pjtype',
    'nxtype',
    'mtype',
    'ngtype',
    'zztype',
    'wwtype',
    'bstype',
    'oem',
    'color',
    'sb',
    'price',
    'beizhu',
    'fgys',
    'mbz',
    'mprice',
    'owner',
    'des',
    'ratio'
  ]

  var id_len = id_arr.length

  var tit_arr = [
    '审核状态',
    'ID',
    '产品编号',
    '类别',
    '中文名',
    '英文名',
    '商品中文规格',
    '商品英文规格',
    '计量单位组',
    '主计量单位',
    '采购计量单位',
    '销售计量单位',
    '库存计量单位',
    '报关计量单位',
    '报关助记符',
    '报关商品编码',
    '报关商品中文名',
    '报关商品英文名',
    '单箱净重',
    '单箱毛重',
    '单箱体积',
    '单箱数量',
    '箱子长',
    '箱子宽',
    '箱子高',
    '出口属性',
    '进口属性',
    '配件属性',
    '内销属性',
    '包材属性',
    '内购属性',
    '自制属性',
    '委外属性',
    '保税属性',
    'OEM号',
    '颜色',
    '商标',
    '销售单价',
    '备注',
    '首选供应商',
    '默认采购币种',
    '默认采购单价',
    '拥有人',
    '生产说明',
    '增值税率%'
  ]
  require(['excel'], function (excel) {
    excel.bind(function (data) {
      data.forEach(function (item, index) {
        var sarr = []
        for (var i = 0; i < id_len; i++) {
          var sid = id_arr[i]
          sarr.push(item[sid])
        }
        data[index] = sarr
        //data[index] = [item.id, item.username, item.node, item.geoip, item.geoisp, item.action, item.content, item.create_at];
      })

      // 设置表头内容
      /* data.unshift(['ID', '{:lang("操作账号")}', '{:lang("操作节点")}', '{:lang("访问地址")}', '{:lang("网络服务商")}', '{:lang("操作行为")}', '{:lang("操作内容")}', '{:lang("创建时间")}']);*/

      data.unshift(tit_arr)

      // 应用表格样式
      return this.withStyle(data, { A: 60, B: 80, C: 99, E: 120, G: 120 })
    }, '{:lang("操作日志")}' + layui.util.toDateString(Date.now(), '_yyyyMMdd_HHmmss'))
  })
</script>
